<template>
  <view class="account-list">
    <view v-for="item in familyList" :key="item.familyCode" class="list-item" @click="toDetail(item)">
      <view class="item-left">
        <text class="item-name">
          {{ item.familyName }}
        </text>
        <text class="item-num">
          {{ item.num }}个成员
        </text>
      </view>
      <image class="item-btn" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_more.png" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getFamilyGroup } from '@/api/my';
import type { GetFamilyGroupResult } from '@/api/my/type';

const familyList = ref<Array<GetFamilyGroupResult>>([]);
const getList = () => {
  getFamilyGroup().then((res: Array<GetFamilyGroupResult>) => {
    familyList.value = res;
  });
};

const toDetail = (item: GetFamilyGroupResult) => {
  uni.navigateTo({
    url: `/pages/views/account/detail?name=${item.familyName}&code=${item.familyCode}&gender=${item.gender}`,
  });
};

onShow(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.account-list {
  margin: 36rpx 0;
  padding: 0 40rpx;
  background: #fff;

  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #DEDEDE;

    .item-left {
      display: flex;
      flex-direction: column;

      .item-name {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        line-height: 48rpx;
      }

      .item-num {
        padding-top: 8rpx;
        font-size: 26rpx;
        color: #979797;
        line-height: 40rpx;
      }
    }

    .item-btn {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .list-item:last-child {
    border-bottom: none;
  }
}
</style>
